<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>进度条的实现</title>
    <script type="text/javascript">
        var xmlobj1;
        var xmlobj2;

        function CreateXMLHTTPRequest(){
            if(window.ActionXObject){
                xmlobj1 = new ActiveXObject("Microsoft.XMLHTTP");
                xmlobj2 = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                xmlobj1 = new XMLHttpRequest();
                xmlobj2 = new XMLHttpRequest();
            }
        }

        function StartProgress(){
            CreateXMLHTTPRequest();
            xmlobj1.open("GET","progress.php",true);
            xmlobj1.onreadystatechange = ProHandler;
            xmlobj1.send(null);
        }

        function ProHandler(){
            if(xmlobj1.readyState<4){
                RefreshPrec();
            }
        }

        function RefreshPrec(){
            xmlobj2.open("GET","test.txt",true);
            xmlobj2.onreadystatechange = StatHandler;
            xmlobj2.send("r="+Math.random());
        }

        function StatHandler(){
            if(xmlobj2.readyState == 4 && xmlobj2.status == 200){
                var progress_img = document.getElementById("percent_img");
                var progress_span = document.getElementById("percent_span");
                if(xmlobj2.responseText != ""){
                    progress_span.innerHTML = xmlobj2.responseText;
                    progress_img.width = xmlobj2.responseText*4;
                }
                if(xmlobj2.responseText == "" || xmlobj2.responseText<100){
                    setTimeout("RefreshPrec()",500);
                }
            }
        }
    </script>
</head>
<body onload="StartProgress()">
<table width="400" border="0" cellpadding="1" cellspacing="1">
    <tr>
        <td bgcolor="#000000">
            <table width="400" border="0"  cellspacing="0" cellpadding="1">
                <tr>
                    <td bgcolor="#ffffff">
                        <img src="../assets/img/main-nav-bg1.png" width="0" height="16" id="percent_img" name="percent_img" align="absmiddle">
                    </td>
                </tr>
            </table>
        </td>
        <td>
            Complete <span id="percent_span" name="percent_span">0</span>%
        </td>
    </tr>
</table>
</body>
</html>